<template>
  <div class="editContainer">
    <!--    <div class="pointId">
          <div class="label">内容：</div>
          <div class="pointIdInput">
            <input type="text">
            <p>提示：课程知识点ID，如果不清楚，请联系知识点平台维护人员</p>
          </div>
        </div>-->
    <div class="questionContainer">
      <div class="phoneContainer">
        <label for="">电话：</label>
        <input type="text" v-model="phone" @change="savePhone">
      </div>
      <p class="title" v-if="scenelist.length">场景设置</p>
      <div class="content" v-if="scenelist">
        <div class="item" v-for="(item,index) in scenelist" :key="index">
          <div class="leftUpload" @click="getIndex(index)">
            <el-upload
                class="upload-cover"
                list-type="picture"
                action="/source/local/upload_local.php"
                :on-progress="progress"
                :on-success="uploadOk"
                :on-error="uploadErro"
                :on-change="change()"
                :show-file-list="false"
                :data="uploaddata[index]"
            >
              <div class="icon el-icon-plus"></div>
              <img :src="item.imgurl" alt="" v-if="item.imgurl">
            </el-upload>
            <p>{{item.name}}</p>
          </div>
          <div class="questionList">
            <input type="text" placeholder="常见问题1" v-model="item.ques1" @change='save'>
            <input type="text" placeholder="常见问题2" v-model="item.ques2" @change='save'>
            <input type="text" placeholder="常见问题3" v-model="item.ques3" @change='save'>
          </div>
        </div>
        <div class="progressConatiner" v-show="uploadFlag">
          <el-progress type="circle" :percentage="progressVal"></el-progress>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {post} from "@/assets/js/http"
export default {
  name: "edit",
  data(){
    return{
      uploaddata:[],
      scenelist:[],//{name:"1",ques1:"1",ques2:"1",ques3:"1",imgurl:"../assets/img/3@3x.png"}window.parent.scenelist 测试数据 zzf
      progressVal:0,
      uploadFlag:false,
      currentIndex:0,
      phone:"",
    }
  },
  mounted() {
    this.scenelist = window.parent.scenelist;
    this.phone = window.parent.phonenumber;
    this.builddata(); //初始化upload 参数 zzf
    console.log(this.uploaddata)
  },
  methods:{
    getIndex(index){
      this.currentIndex = index;
    },
    //zzf 初始化参数
    async builddata( ){
      var prefix;
      var that=this;
      await post('/get_token.php',{act:"ai_thumb"}).then(res=>{
        prefix= res["prefix"];
        that.scenelist.forEach(function(item){
          that.uploaddata.push({
            prefix:prefix,
            act:"ai_thumb",
            key:prefix+item.viewuuid+".jpg"
          })
        })
        console.log(that.uploaddata)
      }).catch(res=>{
        console.log(res)
      })

    },
    save(){
      window.parent.scenelist = this.scenelist;
    },
    savePhone(){
      window.parent.phonenumber = this.phone;
    },
    progress(event) {
      this.progressVal = parseInt(event.percent);
    },
    uploadOk(response){
      console.log(response);
      this.scenelist[this.currentIndex].imgurl = response.data;
      window.parent.scenelist = this.scenelist;
      console.log(response.data);
      this.$message({
        message: '成功',
        type: "success"
      });
    },
    change(file) {
      if (file&&file.status === "ready") {
        this.uploadFlag = true;
      } else {
        this.uploadFlag = false;
      }
    },
    uploadErro() {
      this.$confirm('上传失败', "", {
        confirmButtonText: '确认',
        showCancelButton: false,
        confirmButtonClass: "sureBtn",
        type: "warning",
        center: true
      })
          .then(() => {})
          .catch(() => {});
      /*this.$message({
        message: "上传失败！",
        type: "warning"
      });*/
    },
  }
}
</script>

<style scoped lang="less">
.phoneContainer{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding-left: 15PX;

}
.phoneContainer{
  label{
    font-size: 14PX;
    color: #333333;
  }
  input{
    width: 210PX;
    height: 26PX;
    padding-left: 10PX;
    font-size: 14PX;
  }
}
.editContainer{
  width: 95%;
  margin: 0 auto;
  box-sizing: border-box;
  .pointId{
    height: 91PX;
    padding: 10PX 15PX 0 15PX;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    background-color: #FFFFFF;
  }
  .leftUpload{
    p{
      width: 100%;
      font-size: 14PX;
      color: #333333;
      line-height: 21PX;
    }
  }
  .label{
    font-size: 14PX;
    font-family: SourceHanSansCN-Normal, SourceHanSansCN;
    color: #333333;
    line-height: 42PX;
  }
  .pointIdInput{
    input{
      display: block;
      font-size: 14px;
      width: 473PX;
      height: 42PX;
      background: #FFFFFF;
      border-radius: 1PX;
      border: 1PX solid #DADADA;
    }
    p{
      font-size: 12PX;
      font-family: SourceHanSansCN-Normal, SourceHanSansCN;
      font-weight: 400;
      color: rgba(237, 25, 31, 0.65);
      line-height: 18PX;
      //text-align: left;
    }
  }
  .title{
    height: 57PX;
    line-height: 57PX;
    font-size: 16PX;
    font-weight: 700;
    color: #333333;
    text-align: left;
    padding-left: 15PX;
  }
  .questionContainer{
    margin-top: 10PX;
    background-color: #FFFFFF;
    .content{
      .upload-cover{
        width: 110PX;
        height: 110PX;
      }
      ::v-deep .upload-cover .el-upload {
        width: 110PX;
        height: 110PX;
        border: 1PX dashed #d9d9d9;
        border-radius: 6PX;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
      ::v-deep .upload-cover .el-upload:hover {
        border-color: #409EFF;
      }
      ::v-deep .icon{
        font-size: 28PX;
        color: #8c939d;
        width: 110PX;
        height: 110PX;
        line-height: 110PX;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9;
      }
      img {
        width: 110PX;
        height: 110PX;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 99;
      }
    }
  }
}
.item{
  display: flex;
  flex-direction: row;
  .questionList{
    margin-left: 10PX;
    flex: 1;
    input{
      display: block;
      width: 96%;
      height: 38PX;
      background: #FFFFFF;
      border-radius: 1PX;
      border: 1PX solid #DFDFDF;
      margin-bottom: 8PX;
      padding-left: 10PX;
      box-sizing: border-box;
      font-size: 16PX;
    }
  }
}
</style>